<template>
<div>
    <!-- action 必填  填一个警号  要不然会报错 -->
  <!-- file-list是上传文件列表 可以绑定到上传组件桑 -->
  <el-upload 
    list-type="picture-card" 
    :limit="1" 
    action="#"
    :on-preview="preview"
    :file-list="fileList"
    :on-remove="handleRemove"
    :class=" { disabled : fileComputed} "
    :on-change="changeFile"
    :before-upload="beforeUpload"
    :http-request="upload"
    >
      <i class="el-icon-plus"></i>
  </el-upload>
  <!-- 进度条显示 -->
  <el-progress v-if="showPercent" :percentage="percent" style="width:180px" />
  <el-dialog :visible.sync="showDialog" title="图片预览">
    <img :src="imgUrl" alt="" style="width: 100%">
  </el-dialog>
</div>
</template>

<script>
import { type } from 'os'
import COS from 'cos-js-sdk-v5'  // 引入腾讯云的包
// 然后实例化 引入的包
const cos = new COS({
  SecretId: 'AKIDWt21sWv6JNJFwObbMsAE2bw2VnwujgPt',  // 身份识别id
  SecretKey: 'JNHwO9h04vc9SWN0PZeU6TcWEjz1pOlF' // 身份密钥
})
export default {
  data () {
    return {
    fileList: [],
    showDialog: false,
    imgUrl: '',
    currentFileUid: '', // 记录当前上传的 uid
    percent: 0, // 进度条的百分比
    showPercent: false
    }
  },
  computed: {
    // 如果他为 true 就不能上传了
    fileComputed () {
      return this.fileList.length === 1
    }
  },
  methods: {
    // 点击预览时间
    preview(file) {
      console.log(file.url);
      this.imgUrl = file.url
      this.showDialog = true
    },
    // file 是要删除的文件
    // fileList是删过之后的文件
    handleRemove(file,fileList) {
      // console.log(file);
      // console.log(fileList);
      // this.fileList = fileList  // 最简单
      //  将当前删除文件移除在外
      this.fileList =this.fileList.filter( item => item.uid !== file.uid)
    },
    // 添加图片时间  不能用 push  这个钩子会执行多次
    changeFile(file,fileList) {
      this.fileList = fileList.map(item => item)
    },
    beforeUpload(file,fileList) {
      // 先检查文件类型
      // 定义一个 文件 类型
      const types = ['image/jpeg', 'image/gif', 'image/bmp', 'image/png']
      if(!types.some(item => item === file.type)) {
        // 上传失败  直接返回  再给个提示消息
        this.$message.error('上传图片只能是 JPG、GIF、BMP、PNG 格式!')
        return false  // 终止上传
      }
      // 检查文件大小 限制大小
      const maxSize = 5 * 1024 * 1024
      if(file.size > maxSize) {
        // 超过了  就终止
        this.$message.error('上传的图片不能超过5M')
        return false
      }
      this.currentFileUid = file.uid
      this.showPercent = true
        return true  // 最后一定要 return  true 才认为可以接着上传
    },
    // 自定义上传
    upload (params) {
      console.log(params.file);
      // 如果这两个属性存在
      if(params.file) {
        // 就执行上传操作
        cos.putObject({
          // 上传到腾讯云
          Bucket: 'llf-3369-1314864842',   // 桶名称
          Reglon: 'ap-nanjing', // 地域名称
          Key: params.file.name,
          Body: params.file, // 要上传的文件对象
          StorageClass: 'STANDARD', // 默认上传的类型
          onProgress: (params) => {
            this.percent = params.percent * 100
          }
        },  (err, data) => {
          // data返回数据之后 应该如何处理
          console.log(err || data)
          // data中 又一个 statusCode === 200  的时候说明上传成功
          if(!err && data.statusCode === 200) {
            // 说明文件上传成功  然后获取成功的返回地址
           this.fileList = this.fileList.map(item => {
              // 去找哪个uid
              if(item.uid === this.currentFileUid) {
                // 将成功的地址赋值给原来的url属性
                return { url: 'http://' + data.Location, upload:true}
                // 表示这张图片已经上传完毕 埋个伏笔
              }
              return item
            })
            // 将上传成功的地址 回写到 fileList中
            // 关闭进度条
            // 用延时器 等待疫苗
            setTimeout( () => {
              this.showPercent = false
              this.percent = 0
            },1000)
          }
        })
      }
    }
  }
}
</script>

<style>
.disabled .el-upload--picture-card {
  display: none
}
</style>